<script lang="ts" setup>
import { ref, onMounted, type PropType } from 'vue';
import { $fetch } from '@/settings/utils/fetch';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  params: {
    type: Object as PropType<Record<string, any>>,
    default: () => ({}),
  },

  recipients: {
    type: Array as PropType<Record<string, any>[]>,
    default: () => [],
  },
});

const listing = ref<Record<string, any>[]>([]);
const loading = ref(false);
const pageNumber = ref(1);
const pagination = ref({
  pageSize: 20,
  total: 1,
  current: 1,
});
const { t } = useI18n();

const refresh = async (page = 1) => {
  const { isSuccess, data } = await $fetch('/admin/email/getEmailList', {
    method: 'post',
    data: {
      ...props.params,
      pageNum: page,
      pageSize: 20,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    listing.value = data.records;

    pagination.value.current = page;
    pagination.value.total = data.total;
  }
}

onMounted(() => {
  if (props.recipients.length > 0) {
    listing.value = props.recipients;
  }
  else {
    refresh();
  }
});

const pageChange = (page: number) => {
  pageNumber.value = page;

  refresh(pageNumber.value);
}

defineExpose({
  dialogOptions: {
    width: 1200,
    title: t('settings.view.subscription.user.window.title'),
    buttons: { ok: t('settings.view.subscription.user.window.status1'), cancel: t('settings.view.subscription.user.window.status2') },
  },
});
</script>

<template>
  <div>
    <ATypographyText type="danger" class="mb-10px block">
      {{ $t('settings.view.subscription.user.window.notice') }}
    </ATypographyText>
    <ATable
      :data="listing"
      :pagination="pagination"
      row-key="id"
      @page-change="pageChange"
    >
      <template #columns>
        <ATableColumn :title="$t('settings.view.subscription.user.window.column1')" data-index="userName" />
        <ATableColumn :title="$t('settings.view.subscription.user.window.column2')" data-index="emailAddress" />
      </template>
    </ATable>
  </div>
</template>

<style lang="scss" scoped>
</style>
